<template>
  <view>
    <image class="paybg" :src="statics + 'paybg.png'" mode="widthFix"></image>

    <view class="wrapper">
      <view class="stutas">
        <image :src="statics + 'success.png'"></image>
        <view class="stutas_dec">
          <view class="name">支付成功!</view>
          <view class="thanks">感谢您的购买</view>
        </view>
      </view>
      <view class="pay_info">
        <image class="paper" :src="statics + 'paper.png'"></image>
        <view class="pay_box">
          <view class="money">
            <text>￥</text>{{payInfo.pay_amount}}
            <view class="off" v-if="payInfo.red_packet_amount > 0">红包已抵扣{{payInfo.red_packet_amount}}元</view>
          </view>
          <view class="pay_row">
            <view class="name">收款方</view>
            <view class="dec">{{payInfo.beneficiary}}</view>
          </view>
          <view class="pay_row">
            <view class="name">支付方式</view>
            <view class="dec">{{payInfo.pay_method}}</view>
          </view>
        </view>
      </view>
    </view>
    <u-button type="error" size="normal" style="width: 300rpx;" text="关闭" @click="popWindow"></u-button>

    <!-- 广告弹窗 -->
    <u-popup :show="popupShow" mode="bottom" bgColor="transparent" :overlay="false" :closeable="true"
      @close="popupShow = false">
      <view class="paybanner">
        <image v-if="payInfo.ad" :src="payInfo.ad.image_url" mode="widthFix"></image>
      </view>
    </u-popup>

  </view>
</template>

<script>
  import Request from "@/utils/request.js";
  import alipay from "@/utils/alipay.js"

  export default {
    data() {
      return {
        statics: getApp().globalData.staticUrl,
        popupShow: false,
        payInfo: {}
      };
    },
    onLoad(options) {
      console.log(options)
      this.payDetail(options.pay_no)
    },
    methods: {
      payDetail(payNo) {
        console.log(payNo)
        uni.showLoading({
          "title": "正在查询"
        })
        Request.get(`/pay/${payNo}`).then(res => {
          this.payInfo = res.data
          this.popupShow = res.data.ad ? true : false
          uni.hideLoading()
        })
      },
      popWindow() {
        if (alipay.isAlipay) {
          alipay.popWindow();
        }
      }
    }

  }
</script>

<style lang="scss">
  .wrapper {
    padding: 20rpx;
    position: relative;
    z-index: 9;
  }

  .paybg {
    width: 100%;
    position: fixed;
    top: -70px;
    left: 0;
    z-index: 1;
  }

  .stutas {
    padding: 60rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .stutas image {
    width: 104rpx;
    height: 104rpx;
    margin-right: 20rpx;
  }

  .stutas .name {
    font-weight: bold;
    font-size: 40rpx;
    color: #fff;
  }

  .stutas .thanks {
    font-size: 28rpx;
    color: #FFC6C6;
  }

  .pay_info {
    width: 100%;
    height: 440rpx;
    margin-bottom: 60rpx;
    position: relative;
  }

  .paper {
    height: 440rpx;
  }

  .pay_box {
    width: 100%;
    height: 100%;
    padding: 0 44rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .pay_box .money {
    padding: 50rpx 0;
    font-size: 60rpx;
    text-align: center;
    font-weight: bold;
    color: #333;
  }

  .pay_box .money text {
    font-size: 40rpx;
  }

  .pay_box .money .off {
    font-size: 32rpx;
    color: #DB261F;
  }

  .pay_row {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #333;
  }

  .pay_row .name {
    color: #999;
  }

  .pay_btn {
    width: 400rpx;
    height: 64rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #D0181B, #FF594A);
    box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
    font-size: 28rpx;
    color: #fff;
  }
</style>
